<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import {goBack, messageConfirm, messageTip} from "../util/util.js";

export default {
  name: "ActivityDetailView",

  //注入
  inject: ['reload'],

  data() {
    return {
      //活动详情对象
      activityDetail: {
        ownerDo: {},
        editByDo: {},
        createByDo: {},
      },

      //市场活动备注
      activityRemarkQuery: {},

      //编辑市场活动备注
      activityEditRemarkQuery: {},

      //活动备注规则
      activityRemarkRules: {
        noteContent: [
          {required: true, message: "请输入活动备注", trigger: 'blur'},
          {min: 5, max: 255, message: "活动备注为5-255个字符", trigger: 'blur'}
        ]
      },

      //活动备注列表
      activityRemarkList: [{
        createByDo: {},
        editByDo: {}
      }],

      //编辑备注的验证规则
      activityEditRemarkRules: {
        noteContent: [
          {required: true, message: "请输入活动备注", trigger: 'blur'},
          {min: 5, max: 255, message: "活动备注为5-255个字符", trigger: 'blur'}
        ]
      },

      //分页参数
      pageSize: {},
      total: {},

      //编辑活动备注弹窗
      activityEditRemarkDialogVisible: false,
    }
  },

  methods: {
    //声明返回函数
    goBack,

    //加载市场活动详情
    loadActivityDetail() {
      let id = this.$route.params.id;
      doGet("/api/activity/" + id, {}).then(resp => {
        if (resp.data.code == 200) {
          this.activityDetail = resp.data.data;
          if (!this.activityDetail.ownerDo) {
            this.activityDetail.ownerDo = {};
          }
          if (!this.activityDetail.createByDo) {
            this.activityDetail.createByDo = {}
          }
          if (!this.activityDetail.editByDo) {
            this.activityDetail.editByDo = {}
          }

        }
      })
    },

    //提交活动备注
    activityRemarkSubmit() {
      this.$refs.activityRemarkReForm.validate((isValid) => {
        if (isValid) {
          doPost("/api/activity/remark", {
            activityId: this.activityDetail.id,
            noteContent: this.activityRemarkQuery.noteContent
          }).then(resp => {
            if (resp.data.code == 200) {
              messageTip("提交市场活动备注成功", "success")
              //实现页面刷新
              this.reload();
            } else {
              messageTip("提交市场活动备注失败", "error")
            }
          })
        }
      })
    },

    //查询市场备注列表数据
    loadActivityRemarkList(current) {
      doGet("/api/activity/remark", {
        current: current, //当前页
        activityId: this.$route.params.id
      }).then(resp => {
        if (resp.data.code == 200) {
          this.activityRemarkList = resp.data.data.list;
          this.total = resp.data.data.total;
          this.pageSize = resp.data.data.pageSize;
          console.log(this.activityRemarkList);  // 打印数据检查结构
        }
      })
    },

    //分页函数
    toPage(current) {
      this.loadActivityRemarkList(current);
    },

    //编辑备注记录
    edit(id) {
      this.activityEditRemarkDialogVisible = true;
      doGet("/api/activity/remark/" + id, {}).then(resp => {
        if (resp.data.code == 200) {
          this.activityEditRemarkQuery = resp.data.data
        }
      })
    },

    //提交编辑备注记录
    activityEditRemarkSubmit() {
      this.$refs.activityRemarkReForm.validate((isValid) => {
        if (isValid) {
          doPut("/api/activity/remark", {
            id: this.activityEditRemarkQuery.id,
            noteContent: this.activityEditRemarkQuery.noteContent
          }).then(resp => {
            if (resp.data.code == 200) {
              messageTip("编辑市场活动备注成功", "success")
              //实现页面刷新
              this.reload();
            } else {
              messageTip("编辑市场活动备注失败", "error")
            }
          })
        }
      })
    },

    //删除市场活动备注(逻辑删除)
    del(id) {
      messageConfirm("确定要删除吗?").then(() => {
        doDelete("/api/activity/remark/" + id, {}).then(resp => {
          if (resp.data.code == 200) {
            messageTip("删除备注成功", "success")
            //实现页面刷新
            this.reload();
          } else {
            messageTip("删除备注失败，原因: " + resp.data.msg, "error")
          }
        })
      }).catch(() => {
        messageTip("取消删除备注", "warning")
      })
    },
  },

  mounted() {
    this.loadActivityDetail(),
        this.loadActivityRemarkList()
  }
}
</script>

<template>
  <!--数据页面-->
  <el-form ref="activityRemarkReForm" :model="activityRemarkQuery" label-width="120px" :rules="activityRemarkRules">
    <el-form-item label="ID">
      <div class="detail">
        &nbsp;
        {{ activityDetail.id }}
      </div>
    </el-form-item>

    <el-form-item label="负责人">
      <div class="detail">
        &nbsp;
        {{ activityDetail.ownerDo.name }}
      </div>
    </el-form-item>

    <el-form-item label="活动名称">
      <div class="detail">
        &nbsp;
        {{ activityDetail.name }}
      </div>
    </el-form-item>

    <el-form-item label="开始时间">
      <div class="detail">
        &nbsp;
        {{ activityDetail.startTime }}
      </div>
    </el-form-item>

    <el-form-item label="结束时间">
      <div class="detail">
        &nbsp;
        {{ activityDetail.endTime }}
      </div>
    </el-form-item>

    <el-form-item label="活动预算">
      <div class="detail">
        &nbsp;
        {{ activityDetail.cost }}
      </div>
    </el-form-item>

    <el-form-item label="活动描述">
      <div class="detail">
        &nbsp;
        {{ activityDetail.description }}
      </div>
    </el-form-item>

    <el-form-item label="创建时间">
      <div class="detail">
        &nbsp;
        {{ activityDetail.createTime }}
      </div>
    </el-form-item>

    <el-form-item label="创建人">
      <div class="detail">
        &nbsp;
        {{ activityDetail.createByDo.name }}
      </div>
    </el-form-item>

    <el-form-item label="编辑时间">
      <div class="detail">
        &nbsp;
        {{ activityDetail.editTime }}
      </div>
    </el-form-item>

    <el-form-item label="编辑人">
      <div class="detail">
        &nbsp;
        {{ activityDetail.editByDo.name }}
      </div>
    </el-form-item>

    <el-form-item label="填写备注" prop="noteContent">
      <el-input
          v-model="activityRemarkQuery.noteContent"
          :rows="8"
          type="textarea"
          placeholder="请输入活动备注"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="activityRemarkSubmit()">提 交</el-button>
      <el-button type="primary" plain @click="goBack()">返 回</el-button>
    </el-form-item>

  </el-form>

  <!--  备注页面-->
  <el-table
      :data="activityRemarkList"
      style="width: 100%"
  >
    <el-table-column type="index" label="序号" width="60"/>
    <el-table-column property="noteContent" label="备注内容" show-overflow-tooltip/>
    <el-table-column property="createTime" label="备注时间" show-overflow-tooltip/>
    <el-table-column property="createByDo.name" label="备注人" show-overflow-tooltip/>
    <el-table-column property="editTime" label="编辑时间" show-overflow-tooltip/>
    <el-table-column property="editByDo.name" label="编辑人" show-overflow-tooltip/>
    <el-table-column label="操作" width="240">
      <template #default="scope">
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--导航分页-->
  <el-pagination background
                 layout="prev, pager, next"
                 :total="total"
                 :page-size="pageSize"
                 @prev-click="toPage"
                 @next-click="toPage"
                 @current-change="toPage"
  />

  <!--活动备注记录弹窗-->
  <el-dialog v-model="activityEditRemarkDialogVisible" title="编辑市场活动备注记录" width="55%" center draggable>

    <el-form ref="activityRemarkReForm" :model="activityEditRemarkQuery" label-width="110px"
             :rules="activityEditRemarkRules">
      <el-form-item label="活动备注" prop="noteContent">
        <el-input
            v-model="activityEditRemarkQuery.noteContent"
            :rows="8"
            type="textarea"
            placeholder="请输入活动备注"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="activityEditRemarkDialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="activityEditRemarkSubmit()">提 交</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>
.detail {
  background: #fbd1de;
  width: 100%;
  padding-left: 15px;
}
</style>